<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('ul li a').click(function () {
                var currentElement = $(this).html();
                $('#show').text(currentElement);
                $('ul li a span').removeClass('change');
                $(this).find('span').addClass('change');
            });
        });
    </script>
    <style>
        a {
            text-decoration: none;
        }
        a:visited{
            color: blue;
        }
        .change{
            border:1px solid red;
        }
        ol li{
            border:1px solid pink;
        }
        ol li:first-child{
            border: 2px solid red;
        }
    </style>
</head>
<div>
    <span id='show'></span>
    <ul>
        <li><a href="#"><span>1</span>a</a></li>
        <li><a href="#"><span>2</span>b</a></li>
        <li><a href="#"><span>3</span>c</a></li>
        <li><a href="#"><span>4</span>d</a></li>
    </ul>

    <ul>
        <li><a href="#"><span>1</span>e</a></li>
        <li><a href="#"><span>2</span>f</a></li>
        <li><a href="#"><span>3</span>g</a></li>
        <li><a href="#"><span>4</span>h</a></li>
    </ul>
    <ol>
        <li>123123</li>
        <li>123123</li>
        <li>123123</li>
        <li>123123</li>
    </ol>
</div>

</html>